<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title></title>
    <script type="text/javascript" src="/js/prototype.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/res/member/js/drag.js"></script>
    <script type="text/javascript" src="/res/member/js/resize.js"></script>
    <script type="text/javascript" src="/res/member/js/imageCropper.js"></script>
    <style type="text/css">
        #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{
	        position:absolute;
	        background:#FFF;
	        border: 1px solid #333;
	        width: 6px;
	        height: 6px;
	        z-index:500;
	        font-size:0;
	        opacity: 0.5;
	        filter:alpha(opacity=50);
        }

        #rLeftDown,#rRightUp{cursor:ne-resize;}
        #rRightDown,#rLeftUp{cursor:nw-resize;}
        #rRight,#rLeft{cursor:e-resize;}
        #rUp,#rDown{cursor:n-resize;}

        #rLeftDown{left:-4px;bottom:-4px;}
        #rRightUp{right:-4px;top:-4px;}
        #rRightDown{right:-4px;bottom:-4px;background-color:#00F;}
        #rLeftUp{left:-4px;top:-4px;}
        #rRight{right:-4px;top:50%;margin-top:-4px;}
        #rLeft{left:-4px;top:50%;margin-top:-4px;}
        #rUp{top:-4px;left:50%;margin-left:-4px;}
        #rDown{bottom:-4px;left:50%;margin-left:-4px;}

        #bgDiv{width:300px; height:400px; border:1px solid #666666; position:relative;}
        #dragDiv{border:1px dashed #fff; width:100px; height:60px; top:50px; left:50px; cursor:move; }
    </style>
</head>
<body>
<table width="700" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="300">
        <div id="bgDiv">
            <div id="dragDiv">
                <div id="rRightDown"> </div>
                <div id="rLeftDown"> </div>
                <div id="rRightUp"> </div>
                <div id="rLeftUp"> </div>
                <div id="rRight"> </div>
                <div id="rLeft"> </div>
                <div id="rUp"> </div>
                <div id="rDown"></div>
            </div>
      </div></td>
    <td align="center"><div id="viewDiv" style="width:300px; height:300px;"> </div></td>
  </tr>
</table>"
<br />
<input id="idSize" type="button" value="缩小显示" />
<input id="idOpacity" type="button" value="全透明" />
<input id="idColor" type="button" value="白色背景" />
<input id="idScale" type="button" value="使用比例" />
<input id="idMin" type="button" value="设置最小尺寸" />
<input id="idView" type="button" value="缩小预览" />
<input id="idImg" type="button" value="换图片" />
<br /><br />
图片地址：<input id="idPicUrl" type="text" value="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_mm14.jpg" />
<input id="idPic" type="button" value="换图" />
<script type="text/javascript ">
     var ic = new ImgCropper("bgDiv", "dragDiv", "http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_xx2.jpg", {
	                                Width: 300, Height: 400, Color: "#000",
	                                Resize: true,
	                                Right: "rRight", Left: "rLeft", Up:	"rUp", Down: "rDown",
	                                RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp",
	                                Preview: "viewDiv", viewWidth: 300, viewHeight: 300
        });
     ic.bindEventListeners();
    function checkform(){
        alert($F('username').value);
        alert($F('pwd').value);
        return false;
    }
</script>

<form action="#" method="pos" onsubmit="return  checkform()" >
    <ul>
        <li>用户名：<input type="text" value="hahaha" name="username" id="username"> </li>
        <li>密  码：<input type="password" name="pwd" id="pwd"> </li>
        <li><input type="submit" value="提交" /> </li>
    </ul>
</form>
</body>
</html>